<template>
<div class="main">
  <canvas id="canvas" style="background: #454141"></canvas>
  <canvas id="canvasT" style="background: #454141"></canvas>
</div>
</template>

<script>
import img from './timg.jpeg'
export default {
  name: 'CanvasTest',
  mounted() {
    this.handleCanvas('canvas', 60)
    this.handleCanvas('canvasT', 0)
  },
  methods: {
    handleCanvas(id, rotate) {
      const canvas = document.getElementById(id)
      canvas.width = 800
      canvas.height = 800
      const ctx = canvas.getContext('2d')
      const { ctx: newCtx, canvas: newCanvas } = this.getCanvas(200, 300)
      newCtx.fillStyle = '#17538E'
      newCtx.fillRect(0, 0, 200, 300)
      newCtx.font = '24px STheiti, SimHei'
      newCtx.fillStyle = '#333'
      newCtx.fillText(id, 24, 66)

      console.log(newCanvas)
      document.body.appendChild(newCanvas)
      const center = {
        x: 300 + 100,
        y: 200 + 150
      }
      ctx.translate(center.x, center.y)
      ctx.rotate(rotate * Math.PI / 180)
      ctx.translate(-center.x, -center.y)
      ctx.drawImage(newCanvas, 300, 200, 200, 300)
      ctx.setTransform(1, 0, 0, 1, 0, 0)
    },
    getCanvas(width, height) {
      const canvas = document.createElement('canvas')
      canvas.width = Math.round(width)
      canvas.height = Math.round(height)
      const ctx = canvas.getContext('2d')
      return {
        canvas, ctx
      }
    }
  }
}
</script>

<style scoped>

</style>
